.kaitify-tabs {
  display: block;
  width: 100%;
  position: relative;
  font-size: @font-size;
  color: @font-color;
  line-height: @line-height;
  font-family: @font-family;

  &.kaitify-dark {
    color: @font-color-dark;
  }

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    outline: none;
  }

  .kaitify-tabs-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: @small-padding 0;

    .kaitify-tabs-header-item {
      padding: @small-padding @padding;
      position: relative;
      transition: color 300ms;

      &:hover {
        cursor: pointer;
        color: @theme;
      }

      &.kaitify-tabs-header-item-active {
        color: @theme;

        &::before {
          position: absolute;
          width: calc((100% - @small-padding * 2) * 2 / 3);
          height: 2px;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          content: '';
          background: @theme;
          border-radius: 2px;
        }
      }
    }
  }

  .kaitify-tabs-content {
    position: relative;
    display: block;
    width: 100%;
  }
}
